.index-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    .city{
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background:#F5F5F5;
      z-index: 2;
      opacity: 1;
      .city-box{
        width: 100%;
        height: 100%;
        background: #F5F5F5;
        padding-left: .15rem;
        overflow: scroll;
        padding-right: .15rem;
     .locate-city{
       padding-top: .1rem;
         a{
       color: #333;
         }
         >div{
             padding-top: .1rem;
           span{    
           background: white;
           display: inline-block;
            height: .33rem;
            font-size: .14rem;
            text-align: center;
            width: 20%;
            line-height: .33rem;
            color: #333;
            border-radius: .05rem;
           }
         }
     }
     .again-city{
       a{
         color: #333;
         line-height: .296rem;
       }
       ul{
         display: flex;
         flex-direction: row;
     
         li{
           margin-top: .15rem;
           background: white;
           display: inline-block;
            height: .33rem;
            font-size: .14rem;
            text-align: center;
            width: 20%;
            line-height: .33rem;
            color: #333;
            border-radius: .05rem; 
            margin-right: .1rem;
         }
       }
     }
     .hot-city{
       
       a{
         color: #333;
         line-height: .296rem;
       }
       >div{
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          >div{
            width: 30%;
            margin-top: .15rem;
            background: white;
            display: inline-block;
             height: .33rem;
             font-size: .14rem;
             text-align: center;
             line-height: .33rem;
             color: #333;
             border-radius: .05rem; 
             margin-right: .1rem;
          }
       }
     }
     
        ul{
          height: 100%;
          margin-top: .15rem;
          p{
            padding: 0 0 0 .25rem;
            font-size: .14rem;
            background: #ebebeb;
            line-height: .33rem;
          }
         li{
           height: .45rem;
           color: #333;
           font-size: .14rem;
           line-height: .45rem;
           margin: 0 0 0 .15rem;
           background: #F5F5F5;
           @include border(0 0 2px 0, #c8c7cc);
     
         }
        }
     
        .city-nav{
          width: .35rem;
          text-align: center;
          position: fixed;
          right: 0;
          top: .7rem;
          z-index: 2;
          font-size: .12rem;
          div{
           height: .206rem;
           line-height: .206rem;
          }
        }
        
      }
    }
    header {
      .title{
      height: .44rem;
      background: #f63;
      font-size: .18rem;
      text-align: center;
      line-height: .44rem;
      color: #fff;
    }
      nav {
        height: .44rem;
        display: flex;
        background: #fff;
        align-items: center;
        justify-content: space-between;
        color: #666666;
        @include border(0 0 1px 0, #e8e8e8);
    
        >div:first-child {
          line-height: .44rem;
          padding-left: .15rem;
          font-size: .14rem;
          
        }
        .nav-box{
            display: flex;   
            flex-direction: row;
            font-size: .15rem;
            height: .44rem;
          
            >div{
                margin: 0 .12rem;
                width: 50%;
                text-align: center; 
                height: 100%;
                line-height: .44rem;
                &.tap{
            color:#ef4238;
            border-bottom: 2px solid #ef4238;
            }
            }
           
        }
        .search{
          padding-right: .15rem;
         line-height: .43rem;
          width: .45rem;
          height: .43rem;
          font-size: .3rem;
          color: #f63;
        }
      }
    }
  
    main {
      flex: 1;
      overflow-y: scroll;
    }
  
    footer {
      height: .44rem;
      @include border(1px 0 0 0, #e8e8e8);

      ul {
        height: 100%;
        display: flex;
        li {
          flex: 1;
          background: white;
          text-align: center;
          font-size: .1rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          color: #696969;
          span {
              display: block;
            font-size: .20rem;
           
          }
          &.active {
            color: #f03d37;
          }
        }
      }
    }
  }